<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragment :: header('文件批量上传')" />

</head>
<body>
    <div class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">上传文件</label>
            <div class="layui-input-block">
                <div class="upload">
                    <div class="upload_warp">
                        <button type="button" class="layui-btn layui-btn-primary" id="selectfiles">
                            选择文件
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger" id="postfiles">
                            开始上传
                        </button>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所选文件</label>
            <div class="layui-input-block">
                <div style="margin-top: 20px;">
                    <h4>您所选择的文件：</h4>
                    <div id="tips">你的浏览器不支持flash,Silverlight或者HTML5！</div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">已上传文件</label>
            <div class="layui-input-block" id="uploadedFiles">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
    <div id="previewLayer" style="display: none;padding:10px;">
        <img src="" id="previewImg" style="max-width: 100%;">
    </div>
    <th:block th:include="fragment :: footer" />
    <th:block th:include="fragment :: plupload-js" />
    <script>
        $(function (){
            initUpload();
        })


        //初始化上传控件
        function initUpload() {
            //实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                browse_button: 'selectfiles',
                url: ctx + 'common/ajaxFileUpload',
                flash_swf_url: ctx + 'plupload/js/Moxie.swf',
                silverlight_xap_url: ctx + 'plupload/js/Moxie.xap',
                //使用Flash插件
                runtimes : 'html5,flash,silverlight,html4',
                //最大文件限制
                max_file_size: '100mb',
                //一次上传数据大小
                chunk_size: '100mb',
                unique_names: false,    //是否自动生成唯一名称
                filters: [                //文件类型限制

                ],
                multipart_params: {
                },
                // 缩放图片
                resize: { width: 2000, height: 2000, quality: 80 },
                init: {
                    PostInit: function() {
                        document.getElementById('tips').innerHTML = '';
                        document.getElementById('postfiles').onclick = function() {
                            for (i = 0; i < uploader.files.length; i++) {
                                var f = uploader.files[i];
                                var d = document.getElementById(f.id);
                                if (!d) {
                                    uploader.removeFile(f);
                                }
                            }
                            // uploader.setOption({
                            // 	'url': host,
                            // 	'multipart_params': new_multipart_params
                            // });

                            uploader.start();
                            return false;
                        };
                    },

                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            //此处 innerHTML += 改为=，限制一次只能上传一个文件
                            document.getElementById('tips').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
                                +'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
                                +'</div>';
                        });
                    },

                    BeforeUpload: function(up, file) {
                        // set_upload_param(up, file.name, true);
                    },

                    UploadProgress: function(up, file) {
                        var d = document.getElementById(file.id);
                        if (d) {
                            if (file.percent == 100) {
                                d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + '%，处理中...</span>';
                            } else {
                                d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + '%</span>';
                            }
                            var prog = d.getElementsByTagName('div')[0];
                            var progBar = prog.getElementsByTagName('div')[0]
                            progBar.style.width= file.percent+'%';
                            progBar.setAttribute('aria-valuenow', file.percent);
                        }

                    },

                    FileUploaded: function(up, file, info) {
                        if (info.status == 200) {
                            var filePath = getFilePath(info.response);
                            if (filePath) {
                                showFilePath(filePath);
                                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传成功!';
                            } else {
                                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传失败，请选择文件重新上传!';
                            }
                        } else {
                            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
                        }
                    },

                    Error: function(up, err) {
                        if (err.code == -600) {
                            $("#tips").append("\n文件太大");
                        } else if (err.code == -601) {
                            $("#tips").append("\n文件类型错误");
                        } else if (err.code == -602) {
                            $("#tips").append("\n文件重复上传");
                        } else {
                            $("#tips").append("\nError xml:" + err.response);
                        }
                    }
                }
            });
            uploader.init();
        }

        /**
         * 从响应内容获取文件路径
         * @param response
         * @returns {null|*}
         */
        function getFilePath(response) {
            if (response) {
                var res = JSON.parse(response);
                if (res && res.code == 0) {
                    return res.filePath;
                }
            }
            return null;
        }

        /**
         * 显示已上传文件
         * @param filePath
         */
        function showFilePath(filePath) {
            $("#uploadedFiles").append("<p>" + filePath + "</p>");
        }
    </script>
</body>
</html>